<th:block xmlns:th="https://www.thymeleaf.org"
          th:fragment="articleList (posts)">
  <th:block th:each="post : ${posts}"
            th:with="thumbnail_img = ${#strings.isEmpty(post.spec.cover) ? #strings.isEmpty(theme.config.post.default_thumbnail) ? '' : theme.config.post.default_thumbnail + (#strings.contains(theme.config.post.default_thumbnail, '?') ? '&' : '?') + 'id=' + post.metadata.name : post.spec.cover},
            thumbnail_mode = ${(theme.config.post.top_thumbnail_mode == 'grid' || (!post.spec.pinned && theme.config.post.thumbnail_mode == 'grid'))? 'grid' : (!#strings.isEmpty(post.metadata.annotations.get('thumbnail_mode')) && post.metadata.annotations.get('thumbnail_mode') != 'none')? post.metadata.annotations.get('thumbnail_mode') : post.spec.pinned ? theme.config.post.top_thumbnail_mode : theme.config.post.thumbnail_mode}">
    <div th:if="${!#strings.isEmpty(thumbnail_img) && thumbnail_mode == 'back'}" class="card widget card-cover">
      <a th:href="${post.status.permalink}" th:aria-label="${post.spec.title}" th:title="${post.spec.title}">
        <img class="cover-image" th:alt="${post.spec.title}" th:classappend="${theme.config.basic_info.lazy_enable} ? 'lazyload'" width="auto" height="auto"
             th:data-srcset="${theme.config.basic_info.lazy_enable} ? |${thumbnail.gen(thumbnail_img, 's')} 400w,
              ${thumbnail.gen(thumbnail_img, 'm')} 800w,
              ${thumbnail.gen(thumbnail_img, 'l')} 1200w,
              ${thumbnail.gen(thumbnail_img, 'xl')} 1600w| : ''"
             th:srcset="${!theme.config.basic_info.lazy_enable} ? |${thumbnail.gen(thumbnail_img, 's')} 400w,
              ${thumbnail.gen(thumbnail_img, 'm')} 800w,
              ${thumbnail.gen(thumbnail_img, 'l')} 1200w,
              ${thumbnail.gen(thumbnail_img, 'xl')} 1600w| : ''"
             sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, (max-width: 1200px) 1200px, (max-width: 1600px) 1600px"
             th:src="${theme.config.basic_info.lazy_enable ? '' : thumbnail_img}"
             th:data-src="${!theme.config.basic_info.lazy_enable ? '' : thumbnail_img}"/>
        <div class="details">
          <h2 class="title"><span class="top" th:if="${post.spec.pinned}">[[#{global.pinned.name}]]</span>[[${post.spec.title}]]</h2>
          <ul class="breadcrumb">
            <li th:text="${#dates.format(post.spec.publishTime, theme.config.basic_info.global_time_format)}"></li>
            <li th:if="${theme.config.basic_info.show_visit}"><i class="ri-eye-line"></i>[[${post.stats.visit}]]</li>
            <li th:if="${post.spec.allowComment && site.comment.enable}" class="is-hidden-mobile"><i class="ri-question-answer-line"></i>[[${post.stats.comment}]]
            </li>
            <li th:if="${theme.config.basic_info.show_upvote}"><i class="ri-thumb-up-line"></i>[[${post.stats.upvote}]]</li>
            <li
              th:with="heat= ${24+post.stats.visit*0.1+post.stats.upvote*2+post.stats.comment*3}, heatColor= '#'+${(heat < 37)? 'ffa87e' : (heat < 120)? 'fb734a' : 'e0081c'}"
              th:style="'color: ' + ${heatColor}">[[${#numbers.formatDecimal(heat,0,1)}]]℃
            </li>
          </ul>
        </div>
      </a>
      <div th:if="${!#lists.isEmpty(post.categories)}" class="category">
        <a th:each="cy : ${post.categories}" th:href="${cy.status.permalink}" th:aria-label="${cy.spec.displayName}" th:title="${cy.spec.displayName}" th:text="${cy.spec.displayName}"></a>&nbsp;
      </div>
    </div>

    <div
      th:if="${!#strings.isEmpty(thumbnail_img) && (thumbnail_mode == 'small' || (thumbnail_mode == 'small-alter' && postStat.index % 2 == 0))}"
      class="card widget card-small">
      <a th:href="${post.status.permalink}" th:aria-label="${post.spec.title}" th:title="${post.spec.title}">
        <img class="small-image" th:alt="${post.spec.title}" th:classappend="${theme.config.basic_info.lazy_enable} ? 'lazyload'" width="auto" height="auto"
             th:data-srcset="${theme.config.basic_info.lazy_enable} ? |${thumbnail.gen(thumbnail_img, 's')} 400w,
              ${thumbnail.gen(thumbnail_img, 'm')} 800w,
              ${thumbnail.gen(thumbnail_img, 'l')} 1200w,
              ${thumbnail.gen(thumbnail_img, 'xl')} 1600w| : ''"
             th:srcset="${!theme.config.basic_info.lazy_enable} ? |${thumbnail.gen(thumbnail_img, 's')} 400w,
              ${thumbnail.gen(thumbnail_img, 'm')} 800w,
              ${thumbnail.gen(thumbnail_img, 'l')} 1200w,
              ${thumbnail.gen(thumbnail_img, 'xl')} 1600w| : ''"
             sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, (max-width: 1200px) 1200px, (max-width: 1600px) 1600px"
             th:src="${theme.config.basic_info.lazy_enable ? '' : thumbnail_img}"
             th:data-src="${!theme.config.basic_info.lazy_enable ? '' : thumbnail_img}"/>
      </a>
      <div class="card-content main">
        <h2 class="title">
          <span class="top" th:if="${post.spec.pinned}">[[#{global.pinned.name}]]</span><a th:aria-label="${post.spec.title}" th:title="${post.spec.title}"
          th:href="${post.status.permalink}" th:text="${post.spec.title}"></a>
        </h2>
        <div class="main-content" th:text="${post.status.excerpt}"></div>
        <hr/>
        <div class="meta">
          <ul class="breadcrumb">
            <li th:text="${#dates.format(post.spec.publishTime, theme.config.basic_info.global_time_format)}"></li>
            <li th:if="${theme.config.basic_info.show_visit}"><i class="ri-eye-line"></i>[[${post.stats.visit}]]</li>
            <li th:if="${post.spec.allowComment && site.comment.enable}" class="is-hidden-mobile"><i class="ri-question-answer-line"></i>[[${post.stats.comment}]]
            </li>
            <li th:if="${theme.config.basic_info.show_upvote}"><i class="ri-thumb-up-line"></i>[[${post.stats.upvote}]]</li>
            <li
              th:with="heat= ${24+post.stats.visit*0.1+post.stats.upvote*2+post.stats.comment*3}, heatColor= '#'+${(heat < 37)? 'ffa87e' : (heat < 120)? 'fb734a' : 'e0081c'}"
              th:style="'color: ' + ${heatColor}">[[${#numbers.formatDecimal(heat,0,1)}]]℃
            </li>
          </ul>
          <div th:if="${!#lists.isEmpty(post.categories)}" class="level-item is-hidden-mobile">
            <a th:each="cy : ${post.categories}" th:href="${cy.status.permalink}" th:aria-label="${cy.spec.displayName}" th:title="${cy.spec.displayName}" th:text="${cy.spec.displayName}"></a>&nbsp;
          </div>
        </div>
      </div>
    </div>

    <div
      th:if="${!#strings.isEmpty(thumbnail_img) && (thumbnail_mode == 'small-right' || (thumbnail_mode == 'small-alter' && postStat.index % 2 == 1))}"
      class="card widget card-small">
      <div class="card-content main">
        <h2 class="title">
          <span class="top" th:if="${post.spec.pinned}">[[#{global.pinned.name}]]</span><a th:aria-label="${post.spec.title}" th:title="${post.spec.title}"
          th:href="${post.status.permalink}" th:text="${post.spec.title}"></a>
        </h2>
        <div class="main-content" th:text="${post.status.excerpt}"></div>
        <hr/>
        <div class="meta">
          <ul class="breadcrumb">
            <li th:text="${#dates.format(post.spec.publishTime, theme.config.basic_info.global_time_format)}"></li>
            <li th:if="${theme.config.basic_info.show_visit}"><i class="ri-eye-line"></i>[[${post.stats.visit}]]</li>
            <li th:if="${post.spec.allowComment && site.comment.enable}" class="is-hidden-mobile"><i class="ri-question-answer-line"></i>[[${post.stats.comment}]]
            </li>
            <li th:if="${theme.config.basic_info.show_upvote}"><i class="ri-thumb-up-line"></i>[[${post.stats.upvote}]]</li>
            <li
              th:with="heat= ${24+post.stats.visit*0.1+post.stats.upvote*2+post.stats.comment*3}, heatColor= '#'+${(heat < 37)? 'ffa87e' : (heat < 120)? 'fb734a' : 'e0081c'}"
              th:style="'color: ' + ${heatColor}">[[${#numbers.formatDecimal(heat,0,1)}]]℃
            </li>
          </ul>
          <div th:if="${!#lists.isEmpty(post.categories)}" class="level-item is-hidden-mobile">
            <a th:each="cy : ${post.categories}" th:href="${cy.status.permalink}" th:aria-label="${cy.spec.displayName}" th:title="${cy.spec.displayName}" th:text="${cy.spec.displayName}"></a>&nbsp;
          </div>
        </div>
      </div>
      <a th:href="${post.status.permalink}" th:aria-label="${post.spec.title}" th:title="${post.spec.title}">
        <img class="small-image" th:alt="${post.spec.title}" th:classappend="${theme.config.basic_info.lazy_enable} ? 'lazyload'" width="auto" height="auto"
             th:data-srcset="${theme.config.basic_info.lazy_enable} ? |${thumbnail.gen(thumbnail_img, 's')} 400w,
              ${thumbnail.gen(thumbnail_img, 'm')} 800w,
              ${thumbnail.gen(thumbnail_img, 'l')} 1200w,
              ${thumbnail.gen(thumbnail_img, 'xl')} 1600w| : ''"
             th:srcset="${!theme.config.basic_info.lazy_enable} ? |${thumbnail.gen(thumbnail_img, 's')} 400w,
              ${thumbnail.gen(thumbnail_img, 'm')} 800w,
              ${thumbnail.gen(thumbnail_img, 'l')} 1200w,
              ${thumbnail.gen(thumbnail_img, 'xl')} 1600w| : ''"
             sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, (max-width: 1200px) 1200px, (max-width: 1600px) 1600px"
             th:src="${theme.config.basic_info.lazy_enable ? '' : thumbnail_img}"
             th:data-src="${!theme.config.basic_info.lazy_enable ? '' : thumbnail_img}"/>
      </a>
    </div>

    <a th:if="${thumbnail_mode == 'fold'}" class="card widget card-fold"
       th:aria-label="${post.spec.title}" th:title="${post.spec.title}"
       th:href="${post.status.permalink}">
      <h2 class="title"><span th:if="${post.spec.pinned}" class="top">[[#{global.pinned.name}]]</span>
        <p th:text="${post.spec.title}"></p></h2>
      <p th:text="${#dates.format(post.spec.publishTime, theme.config.basic_info.global_time_format)}"></p>
    </a>

    <div th:if="${(#strings.isEmpty(thumbnail_img) && thumbnail_mode != 'fold' && thumbnail_mode != 'grid') || thumbnail_mode == 'default'}"
      class="card widget">
      <a th:if="${!#strings.isEmpty(thumbnail_img)}" class="thumbnail"
         th:aria-label="${post.spec.title}" th:title="${post.spec.title}"
         th:href="${post.status.permalink}">
        <img class="thumbnail-image" th:alt="${post.spec.title}" th:classappend="${theme.config.basic_info.lazy_enable} ? 'lazyload'" width="auto" height="auto"
             th:data-srcset="${theme.config.basic_info.lazy_enable} ? |${thumbnail.gen(thumbnail_img, 's')} 400w,
              ${thumbnail.gen(thumbnail_img, 'm')} 800w,
              ${thumbnail.gen(thumbnail_img, 'l')} 1200w,
              ${thumbnail.gen(thumbnail_img, 'xl')} 1600w| : ''"
             th:srcset="${!theme.config.basic_info.lazy_enable} ? |${thumbnail.gen(thumbnail_img, 's')} 400w,
              ${thumbnail.gen(thumbnail_img, 'm')} 800w,
              ${thumbnail.gen(thumbnail_img, 'l')} 1200w,
              ${thumbnail.gen(thumbnail_img, 'xl')} 1600w| : ''"
             sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, (max-width: 1200px) 1200px, (max-width: 1600px) 1600px"
             th:src="${theme.config.basic_info.lazy_enable ? '' : thumbnail_img}"
             th:data-src="${!theme.config.basic_info.lazy_enable ? '' : thumbnail_img}"/>
      </a>
      <div class="card-content main">
        <h2 class="title">
          <span class="top" th:if="${post.spec.pinned}">[[#{global.pinned.name}]]</span><a th:aria-label="${post.spec.title}" th:title="${post.spec.title}"
          th:href="${post.status.permalink}" th:text="${post.spec.title}"></a>
        </h2>
        <div class="meta">
          <ul class="breadcrumb">
            <li th:text="${#dates.format(post.spec.publishTime, theme.config.basic_info.global_time_format)}"></li>
            <li th:if="${theme.config.basic_info.show_visit}"><i class="ri-eye-line"></i>[[${post.stats.visit}]]</li>
            <li th:if="${post.spec.allowComment && site.comment.enable}" class="is-hidden-mobile"><i class="ri-question-answer-line"></i>[[${post.stats.comment}]]
            </li>
            <li th:if="${theme.config.basic_info.show_upvote}" class="is-hidden-mobile"><i class="ri-thumb-up-line"></i>[[${post.stats.upvote}]]</li>
            <li
              th:with="heat= ${24+post.stats.visit*0.1+post.stats.upvote*2+post.stats.comment*3}, heatColor= '#'+${(heat < 37)? 'ffa87e' : (heat < 120)? 'fb734a' : 'e0081c'}"
              th:style="'color: ' + ${heatColor}">[[${#numbers.formatDecimal(heat,0,1)}]]℃
            </li>
          </ul>
          <div th:if="${!#lists.isEmpty(post.categories)}" class="level-item">
            <a th:each="cy : ${post.categories}" th:href="${cy.status.permalink}" th:aria-label="${cy.spec.displayName}" th:title="${cy.spec.displayName}"
               th:text="${cy.spec.displayName}"></a>&nbsp;
          </div>
        </div>
        <hr/>
        <div class="main-content" th:text="${post.status.excerpt}"></div>
      </div>
    </div>
  </th:block>
  <div th:if="${theme.config.post.top_thumbnail_mode == 'grid' || theme.config.post.thumbnail_mode == 'grid'}"
       class="column-main-grid">
    <th:block th:each="post : ${posts}"
              th:with="thumbnail_img = ${#strings.isEmpty(post.spec.cover) ? #strings.isEmpty(theme.config.post.default_thumbnail) ? '' : theme.config.post.default_thumbnail + (#strings.contains(theme.config.post.default_thumbnail, '?') ? '&' : '?') + 'id=' + post.metadata.name : post.spec.cover}">
      <div
        th:if="${(theme.config.post.top_thumbnail_mode == 'grid' || (!post.spec.pinned && theme.config.post.thumbnail_mode == 'grid'))}"
        class="card widget">
        <a class="thumbnail" th:href="${post.status.permalink}" th:aria-label="${post.spec.title}" th:title="${post.spec.title}">
          <img class="thumbnail-image" th:alt="${post.spec.title}" th:classappend="${theme.config.basic_info.lazy_enable} ? 'lazyload'" width="auto" height="auto"
               th:data-srcset="${theme.config.basic_info.lazy_enable} ? |${thumbnail.gen(thumbnail_img, 's')} 400w,
              ${thumbnail.gen(thumbnail_img, 'm')} 800w,
              ${thumbnail.gen(thumbnail_img, 'l')} 1200w,
              ${thumbnail.gen(thumbnail_img, 'xl')} 1600w| : ''"
               th:srcset="${!theme.config.basic_info.lazy_enable} ? |${thumbnail.gen(thumbnail_img, 's')} 400w,
              ${thumbnail.gen(thumbnail_img, 'm')} 800w,
              ${thumbnail.gen(thumbnail_img, 'l')} 1200w,
              ${thumbnail.gen(thumbnail_img, 'xl')} 1600w| : ''"
               sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, (max-width: 1200px) 1200px, (max-width: 1600px) 1600px"
               th:src="${theme.config.basic_info.lazy_enable ? '' : thumbnail_img}"
               th:data-src="${!theme.config.basic_info.lazy_enable ? '' : thumbnail_img}"/>
        </a>
        <ul class="breadcrumb">
          <li th:text="${#dates.format(post.spec.publishTime, theme.config.basic_info.global_time_format)}"></li>
          <li th:if="${theme.config.basic_info.show_visit}"><i class="ri-eye-line"></i>[[${post.stats.visit}]]</li>
          <li th:if="${post.spec.allowComment && site.comment.enable}" class="is-hidden-mobile"><i class="ri-question-answer-line"></i>[[${post.stats.comment}]]
          </li>
          <li th:if="${theme.config.basic_info.show_upvote}" class="is-hidden-mobile"><i class="ri-thumb-up-line"></i>[[${post.stats.upvote}]]</li>
          <li
            th:with="heat= ${24+post.stats.visit*0.1+post.stats.upvote*2+post.stats.comment*3}, heatColor= '#'+${(heat < 37)? 'ffa87e' : (heat < 120)? 'fb734a' : 'e0081c'}"
            th:style="'color: ' + ${heatColor}">[[${#numbers.formatDecimal(heat,0,1)}]]℃
          </li>
        </ul>
        <h2 class="title">
          <span class="top" th:if="${post.spec.pinned}">[[#{global.pinned.name}]]</span>
          <a th:aria-label="${post.spec.title}" th:title="${post.spec.title}"
            th:href="${post.status.permalink}" th:text="${post.spec.title}"></a>
        </h2>
      </div>
    </th:block>
  </div>
</th:block>
